<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="true"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
</head>
<style>
    body{
        position: absolute;
        padding: 0;
        margin: 0;
        background-color: #2a414d;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .panel_flex{
        width: 100%;
        height: 100%;
        display: flex;
        padding-top: 30px;
        align-items: center;
        flex-direction:column;
    }
    .panel_flex div{
        box-sizing: border-box;
        border-radius: 8px;
    }
    .panel_flex>div{
        width: 300px;
        padding: 10px;
        background-color: #386f87;
    }
    .panel_flex>div>div{
        width: 70px ;
        height: 70px;
        padding: 4px;
    }
    .panel_flex>div>div>p{
        width: 100%;
        height: 100%;
        color: white;
        text-align: center;
        line-height: 62px;
        font-size: 36px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
    }
    .content_subject{
        position: relative;
        height: 300px;
    }
    .content_subject>div{
        position: absolute;

    }
    .content_subject>div>p {
        background-color: #1496c5;
    }
    .content_answer{
        margin-top: 20px;
        height: 160px;
        display: flex;
        flex-wrap: wrap;
    }
    .content_answer>div{
        cursor: pointer;
    }

    .content_answer>div>p{
        background-color: #3ec5c2;
    }
    .content_subject>div.p11{
        top:10px;
        left: 10px;
    }
    .content_subject>div.p12{
        top:10px;
        left: 80px;
    }
    .content_subject>div.p13{
        top:10px;
        left: 150px;
    }
    .content_subject>div.p14{
        top:10px;
        left: 220px;
    }
    .content_subject>div.p21{
        top:80px;
        left: 10px;
    }
    .content_subject>div.p22{
        top:80px;
        left: 80px;
    }
    .content_subject>div.p23{
        top:80px;
        left: 150px;
    }
    .content_subject>div.p24{
        top:80px;
        left: 220px;
    }
    .content_subject>div.p31{
        top:150px;
        left: 10px;
    }
    .content_subject>div.p32{
        top:150px;
        left: 80px;
    }
    .content_subject>div.p33{
        top:150px;
        left: 150px;
    }
    .content_subject>div.p34{
        top:150px;
        left: 220px;
    }
    .content_subject>div.p41{
        top:220px;
        left: 10px;
    }
    .content_subject>div.p42{
        top:220px;
        left: 80px;
    }
    .content_subject>div.p43{
        top:220px;
        left: 150px;
    }
    .content_subject>div.p44{
        top:220px;
        left: 220px;
    }
    .content_subject>div>p.act{
        background-color: #f2953e;
    }
    .gameover{
        top:0;
        left: 0;
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        align-items: center;
        flex-direction:column;
        background-color: #334d43;

    }
    .gameover>h2{
        display: inline-block;
        font-size: 60px;
        font-weight: bold;
        color: #53f2ae;
        margin-bottom: 10px
    }
    .gameover>h3{
        text-align: center;
        color: #fffabf;
    }
    .gameover>button{
        padding: 6px 20px;
        font-size: 16px;
        border: none;
        background-color: #c37666;
        color: white;
        font-weight: bold;
        border-radius: 4px;
    }
</style>
<body>
    <div class="panel_flex">
        <div class="content_subject">

        </div>
        <div class="content_answer">

        </div>

    </div>
    <div class="gameover">
        <h2>GAME<br>OVER</h2>
        <h3></h3>
        <button>再来一次</button>
    </div>
</body>
<script src="../../public/lib/jquery.min.js"></script>
<script>
    var idioms = [
        "行尸走肉","金蝉脱壳","百里挑一","金玉满堂","背水一战","霸王别姬","天上人间","不吐不快",
        "海阔天空","情非得已","满腹经纶","兵临城下","春暖花开","插翅难逃","黄道吉日","天下无双",
        "偷天换日","两小无猜","卧虎藏龙","珠光宝气","簪缨世族","花花公子","绘声绘影","国色天香",
        "相亲相爱","八仙过海","金玉良缘","掌上明珠","皆大欢喜","逍遥法外","生财有道","极乐世界",
        "情不自禁","愚公移山","魑魅魍魉","龙生九子","精卫填海","海市蜃楼","高山流水","卧薪尝胆",
        "壮志凌云","金枝玉叶","四海一家","穿针引线","无忧无虑","无地自容","三位一体","落叶归根",
        "相见恨晚","惊天动地","滔滔不绝","相濡以沫","长生不死","原来如此","女娲补天","三皇五帝",
        "万箭穿心","水木清华","窈窕淑女","破釜沉舟","天涯海角","牛郎织女","倾国倾城","飘飘欲仙",
        "福星高照","妄自菲薄","永无止境","学富五车","饮食男女","英雄豪杰","国士无双","塞翁失马",
        "万家灯火","石破天惊","精忠报国","养生之道","覆雨翻云","六道轮回","鹰击长空","日日夜夜",
        "厚德载物","亡羊补牢","万里长城","黄金时代","出生入死","一路顺风","随遇而安","千军万马",
        "郑人买履","棋逢对手","叶公好龙","后会无期","守株待兔","凤凰于飞","一生一世","花好月圆",
        "世外桃源","韬光养晦","画蛇添足","青梅竹马","风花雪月","滥竽充数","没完没了","总而言之",
        "欣欣向荣","时光荏苒","差强人意","好好先生","无懈可击","随波逐流","袖手旁观","群雄逐鹿",
        "血战到底","唯我独尊","买椟还珠","龙马精神","一见钟情","喜闻乐见","负荆请罪","三人成虎",
        "河东狮吼","程门立雪","金戈铁马","笑逐颜开","千钧一发","纸上谈兵","风和日丽","邯郸学步",
        "大器晚成","庖丁解牛","甜言蜜语","雷霆万钧","浮生若梦","大开眼界","汗牛充栋","百鸟朝凤",
        "以德服人","白驹过隙","难兄难弟","鬼哭神嚎","声色犬马","指鹿为马","龙争虎斗","雾里看花",
        "男大当婚","未雨绸缪","南辕北辙","三从四德","一丝不挂","高屋建瓴","阳春白雪","杯弓蛇影",
        "闻鸡起舞","四面楚歌","登堂入室","张灯结彩","而立之年","饮鸩止渴","杏雨梨云","龙凤呈祥",
        "勇往直前","左道旁门","莫衷一是","马踏飞燕","掩耳盗铃","大江东去","凿壁偷光","色厉内荏",
        "花容月貌","越俎代庖","鳞次栉比","美轮美奂","缘木求鱼","再接再厉","马到成功","红颜知己",
        "赤子之心","迫在眉睫","风流韵事","相形见绌","诸子百家","鬼迷心窍","星火燎原","画地为牢",
        "岁寒三友","花花世界","纸醉金迷","狐假虎威","纵横捭阖","沧海桑田","不求甚解","暴殄天物",
        "吃喝玩乐","乐不思蜀","身不由己","小家碧玉","文不加点","天马行空","人来人往","千方百计",
        "天高地厚","万人空巷","争分夺秒","如火如荼","大智若愚","斗转星移","七情六欲","大禹治水",
        "空穴来风","孟母三迁","绘声绘色","九五之尊","随心所欲","干将莫邪","相得益彰","借刀杀人",
        "浪迹天涯","刚愎自用","镜花水月","黔驴技穷","肝胆相照","多多益善","叱咤风云","杞人忧天",
        "作茧自缚","一飞冲天","殊途同归","风卷残云","因果报应","无可厚非","赶尽杀绝","天长地久",
        "飞龙在天","桃之夭夭","南柯一梦","口是心非","江山如画","风华正茂","一帆风顺","一叶知秋",
        "草船借箭","铁石心肠","望其项背","头晕目眩","大浪淘沙","纵横天下","有问必答","无为而治",
        "釜底抽薪","吹毛求疵","好事多磨","空谷幽兰","悬梁刺股","白手起家","完璧归赵","忍俊不禁",
        "沐猴而冠","白云苍狗","贼眉鼠眼","围魏救赵","烟雨蒙蒙","炙手可热","尸位素餐","出水芙蓉",
        "礼仪之邦","一丘之貉","鹏程万里","叹为观止","韦编三绝","今生今世","草木皆兵","宁缺毋滥",
        "回光返照","露水夫妻","讳莫如深","贻笑大方","紫气东来","万马奔腾","一诺千金","老马识途",
        "五花大绑","捉襟见肘","瓜田李下","水漫金山","苦心孤诣","可见一斑","五湖四海","虚怀若谷",
        "欲擒故纵","风声鹤唳","毛遂自荐","蛛丝马迹","中庸之道","迷途知返","自由自在","龙飞凤舞",
        "树大根深","雨过天晴","乘风破浪","筚路蓝缕","朝三暮四","患得患失","君子好逑","鞭长莫及",
        "竭泽而渔","飞黄腾达","囊萤映雪","飞蛾扑火","自怨自艾","风驰电掣","白马非马","退避三舍",
        "三山五岳","称心如意","望梅止渴","茕茕孑立","振聋发聩","运筹帷幄","逃之夭夭","杯水车薪",
        "有的放矢","矫枉过正","睚眦必报","姗姗来迟","一鸣惊人","孜孜不倦","一马平川","入木三分",
        "沆瀣一气","天伦之乐","兄弟阋墙","藕断丝连","心猿意马","想入非非","盲人摸象","眉飞色舞",
        "三教九流","高楼大厦","锲而不舍","过犹不及","狗尾续貂","斗酒学士","高山仰止","形影不离",
        "小心翼翼","返璞归真","见贤思齐","按图索骥","枪林弹雨","桀骜不驯","遇人不淑","道貌岸然",
        "名扬四海","虚与委蛇","门可罗雀","水落石出","不卑不亢","无法无天","拔苗助长","大快朵颐",
        "因地制宜","单刀直入","时来运转","天方夜谭","一蹴而就","踌躇满志","战无不胜","插翅难飞",
        "图穷匕见","鬼话连篇","亢龙有悔","望洋兴叹","爱屋及乌","惊鸿一瞥","风华绝代","名胜古迹",
        "如履薄冰","持之以恒","潜移默化","昙花一现","巫山云雨","狡兔三窟","栉风沐雨","骇人听闻",
        "断章取义","曲突徙薪","谢天谢地","脱颖而出","垂帘听政","一马当先","不耻下问","不以为然",
        "春华秋实","欲盖弥彰","人琴俱亡","投鼠忌器","歧路亡羊","金风玉露","落花流水","春风化雨",
        "心如刀割","锱铢必较","一叶障目","来历不明","名副其实","中流砥柱","绕梁三日","安步当车",
        "放荡不羁","天衣无缝","自相矛盾","神机妙算","沧海一粟","冲锋陷阵","龙虎风云","言简意赅",
        "九死一生","铁树开花","画龙点睛","风雨无阻","坐井观天","奇货可居","浮光掠影","牝鸡司晨",
        "沽名钓誉","天作之合","甚嚣尘上","铩羽而归","劫后余生","泾渭分明","节哀顺变","有恃无恐",
        "不绝如缕","马革裹尸","监守自盗","耳濡目染","金屋藏娇","不约而同","逐鹿中原","龙潭虎穴",
        "江郎才尽","明日黄花","栩栩如生","人山人海","面面相觑","唇亡齿寒","知法犯法","相敬如宾",
        "欢聚一堂","曾几何时","纷至沓来","李代桃僵","毛骨悚然","衣冠禽兽","有凤来仪","见微知著",
        "旗鼓相当","无与伦比","摸金校尉","牛头马面","凤毛麟角","难得糊涂","衣香鬓影","马到功成",
        "鸠占鹊巢","狭路相逢","春秋笔法","厉兵秣马","约法三章","豁然开朗","平步青云","步步为营",
        "蝇营狗苟","心如止水","从善如流","殚精竭虑","十字路口","矢志不渝","九九归一","井底之蛙",
        "居安思危","不一而足","周而复始","望穿秋水","秦晋之好","不落窠臼","司空见惯","怙恶不悛",
        "百年好合","出神入化","身体力行","敬谢不敏","嗤之以鼻","天之骄子","贤妻良母","能说会道",
        "进退维谷","甘之如饴","人心不古","颐指气使","墨守成规","左右逢源","回心转意","插科打诨",
        "别来无恙","翩翩公子","穷兵黩武","舌战群儒","字字珠玑","义无反顾","举重若轻","钟灵毓秀",
        "水滴石穿","防微杜渐","衣冠楚楚","卧冰求鲤","觥筹交错","络绎不绝","自强不息","秀色可餐",
        "至理名言","分庭抗礼","萍水相逢","水性杨花","戛然而止","气喘吁吁","沉鱼落雁","望尘莫及",
        "亦步亦趋","川流不息","千锤百炼","谈笑风生","高朋满座","丧心病狂","天下无敌","惊弓之鸟",
        "耿耿于怀","心照不宣","荦荦大端","噤若寒蝉","上下其手","弄假成真","天网恢恢","夜郎自大",
        "鞭辟入里","义薄云天","所向披靡","点石成金","回眸一笑","巴山夜雨","兢兢业业","克己复礼",
        "风起云涌","不惑之年","义愤填膺","门当户对","声名狼藉","时过境迁","念念不忘","鞠躬尽瘁",
        "不言而喻","人生如梦","琴棋书画","酸甜苦辣","走马观花","全力以赴","人面桃花","王侯将相",
        "青山不老","朝令夕改","小时了了","玩世不恭","人情世故","聊胜于无","为虎作伥","休戚相关",
        "三阳开泰","五子登科","熙熙攘攘","开源节流","绝处逢生","一石二鸟","鬼斧神工","青天白日",
        "病入膏肓","横行霸道","对牛弹琴","诚惶诚恐","胡服骑射","虎视眈眈","十万火急","断袖之癖",
        "得陇望蜀","分道扬镳","壮士断腕","自惭形秽","云淡风轻","巾帼英雄","眼花缭乱","不可一世",
        "沁人心脾","侃侃而谈","闻过则喜","班门弄斧","舍我其谁","潸然泪下","肆无忌惮","心旷神怡",
        "物竞天择","东山再起","丹凤朝阳","和光同尘","心力衰竭","事半功倍","阿鼻地狱","九关虎豹",
        "劝百讽一","琳琅满目","一丝不苟","逝者如斯","同仇敌忾","朝秦暮楚","不亦乐乎","哭笑不得",
        "重见天日","集腋成裘","风月无边","乐此不疲","咫尺天涯","宠辱不惊","安然无恙","一事无成",
        "若即若离","本末倒置","秋风落叶","无价之宝","金刚怒目","以儆效尤","波涛汹涌","花团锦簇",
        "海枯石烂","目无全牛","颠倒乾坤","当仁不让","车水马龙","天下为公","火中取栗","众矢之的",
        "尽善尽美","欢天喜地","今非昔比","天府之国","不可名状","异想天开","粉墨登场","根深蒂固",
        "钟鸣鼎食","历历在目","不法之徒","出人头地","以德报怨","梨花带雨","抛砖引玉","优柔寡断",
        "开门见山","参差不齐","温文尔雅","甘心情愿","暗度陈仓","挑肥拣瘦","阿猫阿狗","心有余悸",
        "数典忘祖","喜出望外","文过饰非","连锁反应","将心比心","无动于衷","鹤唳华亭","妙手空空",
        "登峰造极","惊涛骇浪","自欺欺人","绿树成荫","岂有此理","万马齐喑","世态炎凉","冠冕堂皇",
        "天罗地网","踽踽独行","兔死狐悲","众志成城","耳提面命","待字闺中","女扮男装","东张西望",
        "马首是瞻","物极必反","蔚然成风","迫不及待","淋漓尽致","风尘仆仆","外强中干","求全责备",
        "人浮于事","安居乐业","珠联璧合","一网打尽","任重道远","循循善诱","移花接木","不知所措",
        "柳暗花明","白虹贯日","首鼠两端","前仆后继","醉生梦死","惺惺相惜","焚膏继晷","金童玉女",
        "横扫千军","闭门造车","峰回路转","涸辙之鲋","锦上添花","亭亭玉立","干柴烈火","香草美人",
        "新亭对泣","鹤立鸡群","一往无前","吴下阿蒙","草长莺飞","兔死狗烹","姹紫嫣红","因材施教",
        "长生不老","爱莫能助","洗耳恭听","信手拈来","时不我待","举一反三","蠢蠢欲动","苟延残喘",
        "正襟危坐","助人为乐","火树银花","齐大非偶","无影无踪","不胫而走","笨鸟先飞","精打细算",
        "尾大不掉","词不达意","门庭若市","落英缤纷","戎马倥偬","上行下效","提纲挈领","蹉跎岁月"
    ];
    var words = [
        "行","尸","走","肉","金","蝉","脱","壳","百","里","挑","一","玉","满","堂","背",
        "水","战","霸","王","别","姬","天","上","人","间","不","吐","快","海","阔","空",
        "情","非","得","已","腹","经","纶","兵","临","城","下","春","暖","花","开","插",
        "翅","难","逃","黄","道","吉","日","无","双","偷","换","两","小","猜","卧","虎",
        "藏","龙","珠","光","宝","气","簪","缨","世","族","公","子","绘","声","影","国",
        "色","香","相","亲","爱","八","仙","过","良","缘","掌","明","皆","大","欢","喜",
        "逍","遥","法","外","生","财","有","极","乐","界","自","禁","愚","移","山","魑",
        "魅","魍","魉","九","精","卫","填","市","蜃","楼","高","流","薪","尝","胆","壮",
        "志","凌","云","枝","叶","四","家","穿","针","引","线","忧","虑","地","容","三",
        "位","体","落","归","根","见","恨","晚","惊","动","滔","绝","濡","以","沫","长",
        "死","原","来","如","此","女","娲","补","皇","五","帝","万","箭","心","木","清",
        "华","窈","窕","淑","破","釜","沉","舟","涯","角","牛","郎","织","倾","飘","欲",
        "福","星","照","妄","菲","薄","永","止","境","学","富","车","饮","食","男","英",
        "雄","豪","杰","士","塞","翁","失","马","灯","火","石","忠","报","养","之","覆",
        "雨","翻","六","轮","回","鹰","击","夜","厚","德","载","物","亡","羊","牢","时",
        "代","出","入","路","顺","风","随","遇","而","安","千","军","郑","买","履","棋",
        "逢","对","手","好","后","会","期","守","株","待","兔","凤","凰","于","飞","月",
        "圆","桃","源","韬","晦","画","蛇","添","足","青","梅","竹","雪","滥","竽","充",
        "数","没","完","了","总","言","欣","向","荣","荏","苒","差","强","意","先","懈",
        "可","波","逐","袖","旁","观","群","鹿","血","到","底","唯","我","独","尊","椟",
        "还","神","钟","闻","负","荆","请","罪","成","河","东","狮","吼","程","门","立",
        "戈","铁","笑","颜","钧","发","纸","谈","和","丽","邯","郸","步","器","庖","丁",
        "解","甜","蜜","语","雷","霆","浮","若","梦","眼","汗","栋","鸟","朝","服","白",
        "驹","隙","兄","弟","鬼","哭","嚎","犬","指","为","争","斗","雾","看","当","婚",
        "未","绸","缪","南","辕","北","辙","从","丝","挂","屋","建","瓴","阳","杯","弓",
        "鸡","起","舞","面","楚","歌","登","室","张","结","彩","年","鸩","渴","杏","梨",
        "呈","祥","勇","往","直","前","左","莫","衷","是","踏","燕","掩","耳","盗","铃",
        "江","去","凿","壁","厉","内","貌","越","俎","鳞","次","栉","比","美","奂","求",
        "鱼","再","接","功","红","知","己","赤","迫","在","眉","睫","韵","事","形","绌",
        "诸","迷","窍","燎","岁","寒","友","醉","狐","假","威","纵","横","捭","阖","沧",
        "桑","田","甚","暴","殄","吃","喝","玩","思","蜀","身","由","碧","文","加","点",
        "方","计","巷","分","夺","秒","荼","智","转","七","禹","治","穴","孟","母","迁",
        "所","干","将","邪","益","彰","借","刀","杀","浪","迹","刚","愎","用","镜","黔",
        "驴","技","穷","肝","多","善","叱","咤","杞","作","茧","缚","冲","殊","途","同",
        "卷","残","因","果","应","赶","尽","久","夭","柯","口","正","茂","帆","秋","草",
        "船","肠","望","其","项","头","晕","目","眩","淘","沙","问","必","答","抽","吹",
        "毛","疵","磨","谷","幽","兰","悬","梁","刺","股","璧","赵","忍","俊","沐","猴",
        "冠","苍","狗","贼","鼠","围","魏","救","烟","蒙","炙","热","素","餐","芙","蓉",
        "礼","仪","邦","丘","貉","鹏","叹","韦","编","今","宁","缺","毋","返","露","夫",
        "妻","讳","深","贻","紫","奔","腾","诺","老","识","绑","捉","襟","肘","瓜","李",
        "漫","苦","孤","诣","斑","湖","虚","怀","擒","故","鹤","唳","遂","荐","蛛","中",
        "庸","树","晴","乘","筚","蓝","缕","暮","患","君","逑","鞭","及","竭","泽","渔",
        "达","囊","萤","映","蛾","扑","怨","艾","驰","电","掣","退","避","舍","岳","称",
        "茕","孑","振","聋","聩","运","筹","帷","幄","的","放","矢","矫","枉","睚","眦",
        "姗","迟","鸣","孜","倦","平","川","沆","瀣","伦","阋","墙","藕","断","连","猿",
        "想","盲","摸","象","教","厦","锲","犹","尾","续","貂","酒","仰","离","翼","璞",
        "真","贤","齐","按","图","索","骥","枪","林","弹","桀","骜","驯","岸","然","名",
        "扬","与","委","罗","雀","卑","亢","拔","苗","助","朵","颐","制","宜","单","谭",
        "蹴","就","踌","躇","胜","匕","话","篇","悔","洋","兴","乌","鸿","瞥","古","冰",
        "持","恒","潜","默","化","昙","现","巫","狡","窟","骇","听","章","取","义","曲",
        "突","徙","谢","颖","垂","帘","政","耻","实","盖","弥","琴","俱","投","忌","歧",
        "割","锱","铢","较","障","历","副","砥","柱","绕","荡","羁","衣","缝","矛","盾",
        "机","妙","算","粟","锋","陷","阵","简","赅","睛","阻","坐","井","奇","货","居",
        "掠","牝","司","晨","沽","钓","誉","合","嚣","尘","铩","羽","劫","余","泾","渭",
        "节","哀","变","恃","恐","革","裹","监","染","娇","约","潭","才","栩","觑","唇",
        "齿","犯","敬","宾","聚","曾","几","何","纷","至","沓","僵","骨","悚","禽","兽",
        "微","著","旗","鼓","校","尉","麟","糊","涂","鬓","鸠","占","鹊","巢","狭","笔",
        "秣","豁","朗","营","蝇","苟","殚","十","字","渝","蛙","危","周","复","始","秦",
        "晋","窠","臼","惯","怙","恶","悛","力","敏","嗤","鼻","骄","能","说","进","维",
        "甘","饴","使","墨","规","右","科","打","诨","恙","翩","黩","武","舌","儒","玑",
        "反","顾","举","重","轻","灵","毓","秀","滴","防","杜","渐","鲤","觥","交","错",
        "络","绎","息","理","庭","抗","萍","性","杨","戛","喘","吁","雁","亦","趋","锤",
        "炼","朋","座","丧","病","狂","敌","耿","宣","荦","端","噤","弄","网","恢","辟",
        "披","靡","眸","巴","兢","业","克","涌","惑","愤","膺","户","狼","藉","念","忘",
        "鞠","躬","瘁","喻","书","酸","辣","全","赴","侯","令","夕","改","恭","聊","伥",
        "休","戚","关","泰","熙","攘","处","二","斧","工","膏","肓","诚","惶","胡","骑",
        "射","视","眈","急","癖","陇","镳","腕","惭","秽","淡","巾","帼","缭","乱","沁",
        "脾","侃","则","班","谁","潸","泪","肆","惮","旷","怡","竞","择","丹","衰","半",
        "倍","阿","狱","豹","劝","讽","琳","琅","逝","者","斯","仇","忾","乎","集","腋",
        "裘","边","疲","咫","尺","宠","辱","即","本","末","倒","置","价","怒","儆","效",
        "尤","涛","汹","团","锦","簇","枯","烂","颠","乾","坤","仁","让","栗","众","昔",
        "府","状","异","粉","场","蒂","固","鼎","徒","带","抛","砖","优","柔","寡","参",
        "温","尔","雅","愿","暗","度","陈","仓","肥","拣","瘦","猫","悸","典","祖","饰",
        "锁","亭","峰","造","欺","绿","荫","岂","喑","态","炎","凉","冕","踽","悲","提",
        "命","闺","扮","装","西","首","瞻","蔚","淋","漓","致","仆","责","备","联","任",
        "远","循","诱","措","柳","虹","贯","继","惺","惜","焚","晷","童","扫","闭","涸",
        "鲋","柴","烈","新","泣","吴","莺","烹","姹","嫣","材","施","洗","信","拈","蠢",
        "延","银","偶","踪","胫","笨","细","掉","词","缤","戎","倥","偬","纲","挈","领",
        "蹉","跎"
    ];
    var word;
    var count = 0;
    function game() {
        var idiom_1_arr;
        var idiom_3_arr;
        function creatSubject(){
            var idiom_1 = idioms[parseInt(Math.random()*760)];
            idiom_1_arr = idiom_1.split("");
            word = idiom_1_arr[parseInt(Math.random() * 4)];
            var like_idiom = [];
            for(var i in idioms){
                var idiom_2 = idioms[i];
                if(idiom_2 != idiom_1){
                    var idiom_2_arr = idiom_2.split("");
                    for(var i in idiom_2_arr){
                        if(idiom_2_arr[i] == word){
                            like_idiom.push(idiom_2_arr)
                        }
                    }
                }
            }
            if(like_idiom.length > 0){
                idiom_3_arr = like_idiom[parseInt(Math.random() * like_idiom.length)]
            }else{
                creatSubject();
            }
        }
        creatSubject();
        var topi = idiom_1_arr.indexOf(word) + 1;
        var left = parseInt(idiom_3_arr.indexOf(word)) + 1;
        var html_subject = "";
        for(var i = 0 ;i < 4 ; i ++){
            if(i == (top-1)){
                continue;
            }
            html_subject += '<div class="p' + left  + (i + 1) + '"><p>' + idiom_1_arr[i] + '</p></div>';
        }
        for(var i = 0 ;i < 4 ; i ++){
            if(i == (left- 1)){
                continue;
            }
            html_subject += '<div class="p'  + (i + 1)  + topi + '"><p>' + idiom_3_arr[i] + '</p></div>';
        }
        console.log(html_subject);
        html_subject += '<div class="p' + left + topi + '"><p class="act">?</p></div>';
        $(".content_subject").html(html_subject);

        var word_index = parseInt(Math.random() * 8);
        var words_select = [];
        for(var i = 0 ; i < 8 ; i ++ ){
            if(i == word_index){
                words_select.push(word)
            }else{
                words_select.push(words[parseInt(Math.random() * words.length)]);
            }
        }
        var html_select = "";
        for(var i in words_select){
            html_select += '<div><p>' + words_select[i] + '</p></div>';
        }
        $(".content_answer").html(html_select);
        $(".content_answer>div").on("click",function () {
            var word_now =  $(this).find("p").html();
            console.log(word_now);
            if(word_now == word){
                count ++;
                game();
            }else{
                $(".gameover").css("display","flex");
                $(".gameover>h3").html("本次得分：" + count);
            }
        })
    }
    $(".gameover>button").click(function () {
        count = 0;
        $(".gameover").css("display","none");
        game();
    });
    game();
</script>
</html>